<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学友注册</title>
    <style>
        html,
        body {
            height: 100%;
        }

        .tariffCards {
            position: absolute;
            z-index: 0;
            top: 50%;
            right: 10%;
            margin: -180px 0 0 -140px;
            user-select: none;
            transform: translate3d(0, 0, 0);
            transform-style: preserve-3d;
        }

        .tariffCards:after {
            position: absolute;
            bottom: -27px;
            left: 5%;
            content: "";
            width: 65%;
            height: 10px;
            border-radius: 100%;
            background-image: radial-gradient(rgba(34, 50, 84, 0.04), rgba(34, 50, 84, 0));
        }

        .tariffCards>div {
            position: relative;
            width: 280px;
            height: 140px;
            border-radius: 12px;
            color: white;
            transform: rotateX(45deg) rotateY(-15deg) rotate(45deg);
            transition: all 0.4s ease;
            overflow: hidden;
            cursor: pointer;
        }

        .tariffCards>div:after {
            position: absolute;
            top: -70px;
            left: 0;
            content: "";
            width: 200%;
            height: 200%;
            background-image: linear-gradient(60deg, rgba(255, 255, 255, 0) 20%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 80%);
            transform: translateX(-100%);
        }

        .tariffCards>div h3 {
            position: absolute;
            bottom: 28px;
            left: 15px;
            font-size: 18px;
            font-weight: 800;
        }

        .tariffCards>div span {
            position: absolute;
            font-weight: 700;
            bottom: 15px;
            left: 15px;
            font-size: 12px;
            font-weight: 600;
            opacity: 0.8;
        }

        .tariffCards>div.economy {
            margin-top: 0;
            z-index: 3;
            background-color: #8063E1;
            background-image: linear-gradient(135deg, #BD7BE8, #8063E1);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #8063E1;
        }

        .tariffCards>div.premiumeconomy {
            margin-top: -70px;
            z-index: 2;
            background-color: #3F58E3;
            background-image: linear-gradient(135deg, #7F94FC, #3F58E3);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #3F58E3;
        }

        .tariffCards>div.business {
            margin-top: -70px;
            z-index: 1;
            background-color: #2C6FD1;
            background-image: linear-gradient(135deg, #21BBFE, #2C6FD1);
            box-shadow: 20px 20px 60px rgba(34, 50, 84, 0.5), 1px 1px 0px 1px #2C6FD1;
        }

        .tariffCards>div.first {
            margin-top: -70px;
            background-color: #352F64;
            background-image: linear-gradient(135deg, #415197, #352F64);
            box-shadow: 5px 5px 60px rgba(34, 50, 84, 0.1), 1px 1px 0px 1px #352F64;
        }

        .tariffCards>div:hover {
            transform: rotateX(30deg) rotateY(-15deg) rotate(30deg) translate(-25px, 50px);
        }

        .tariffCards>div:hover:after {
            transform: translateX(100%);
            transition: all 1.2s ease-in-out;
        }

        /* main */

        svg {
            position: fixed;
            top: 10px;
            left: 180px;
        }

        .container {
            position: relative;
            top: 60px;
            padding: 20px 0;
            left: 35%;
            display: block;
            margin-bottom: 80px;
            width: 500px;
            height: 100%;
            background: #fff;
            border-radius: 5px;
            overflow: hidden;
            z-index: 1;
        }

        h2 {
            padding: 20px;
            font-weight: lighter;
            text-transform: uppercase;
            color: #414141;
        }

        input,
        .sel-div,
        .btn-div {
            display: block;
            height: 40px;
            width: 90%;
            margin: 0 auto;
            border: none;
        }

        input::placeholder {
            -webkit-transform: translateY(0px);
            transform: translateY(0px);
            -webkit-transition: .5s;
            transition: .5s;
        }

        .input-reg {
            position: relative;
            z-index: 1;
            border-bottom: 1px solid rgba(0, 0, 0, .1);
            padding-left: 20px;
            font-family: 'Open Sans', sans-serif;
            text-transform: uppercase;
            color: #858585;
            font-weight: lighter;
            -webkit-transition: .5s;
            transition: .5s;
        }

        .msg {
            font-size: .8rem;
            margin-left: 20px;
        }

        .sel-div {
            display: flex;
            justify-content: space-around;
        }

        .sel-reg {
            width: 48%;
            height: 40px;
        }

        .btn-div {
            display: flex;
            justify-content: space-between;
        }

        .btn {
            width: 48%;
            background-color: #409EFF;
            color: #fff;
            border-radius: 5px;
            outline: none;
        }

        .btn:hover {
            background-color: #3888d8;
            box-shadow: 0 0 5px 0 #000;
        }

        .recommend {
            top: 28px;
            display: none;
            position: absolute;
            z-index: 99;
            background-color: #fff;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            height: 100px;
            overflow-y: scroll;
            width: 85%;
            left: 20px;
            box-shadow: 0 5px 5px 2px rgba(0, 0, 0, .5);
            list-style: none;
            padding: 0;
            padding-left: 15px;
        }

        .recommend li {
            cursor: pointer;
            padding: 10px;
        }

        .recommend li:hover {
            background-color: rgba(0, 0, 0, .2);
        }

        .email-recommend {
            left: 30px;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="tariffCards">
            <div class="economy">
                <h3>
                    Java
                </h3>
                <span>
                    JavaWeb SSM SpringBoot
                </span>
            </div>
            <div class="premiumeconomy">
                <h3>
                    JavaScript
                </h3>
                <span>
                    Vue React
                </span>
            </div>
            <div class="business">
                <h3>
                    Python
                </h3>
                <span>
                    Tkinter Django PyGame Selenium
                </span>
            </div>
            <div class="first">
                <h3>
                    Algorithm
                </h3>
                <span>
                    Sort Tree LinkedList Map
                </span>
            </div>
        </div>
        <div id="main">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px"
                viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
                <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="174.7899" y1="186.34" x2="330.1259"
                    y2="186.34" gradientTransform="matrix(0.8538 0.5206 -0.5206 0.8538 147.9521 -79.1468)">
                    <stop offset="0" style="stop-color:#FFC035" />
                    <stop offset="0.221" style="stop-color:#F9A639" />
                    <stop offset="1" style="stop-color:#E64F48" />
                </linearGradient>
                <circle fill="url(#SVGID_1_)" cx="266.498" cy="211.378" r="77.668" />
                <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="290.551" y1="282.9592" x2="485.449"
                    y2="282.9592">
                    <stop offset="0" style="stop-color:#FFA33A" />
                    <stop offset="0.0992" style="stop-color:#E4A544" />
                    <stop offset="0.9624" style="stop-color:#00B59C" />
                </linearGradient>
                <circle fill="url(#SVGID_2_)" cx="388" cy="282.959" r="97.449" />
                <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="180.3469" y1="362.2723" x2="249.7487"
                    y2="362.2723">
                    <stop offset="0" style="stop-color:#12B3D6" />
                    <stop offset="1" style="stop-color:#7853A8" />
                </linearGradient>
                <circle fill="url(#SVGID_3_)" cx="215.048" cy="362.272" r="34.701" />
                <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="367.3469" y1="375.3673" x2="596.9388"
                    y2="375.3673">
                    <stop offset="0" style="stop-color:#12B3D6" />
                    <stop offset="1" style="stop-color:#7853A8" />
                </linearGradient>
                <circle fill="url(#SVGID_4_)" cx="482.143" cy="375.367" r="114.796" />
                <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="365.4405" y1="172.8044" x2="492.4478"
                    y2="172.8044" gradientTransform="matrix(0.8954 0.4453 -0.4453 0.8954 127.9825 -160.7537)">
                    <stop offset="0" style="stop-color:#FFA33A" />
                    <stop offset="1" style="stop-color:#DF3D8E" />
                </linearGradient>
                <circle fill="url(#SVGID_5_)" cx="435.095" cy="184.986" r="63.504" />
            </svg>


            <div class="container">
                <h2>学友注册</h2>
                <form method="POST" action="">
                    <input type="text" class="input-reg" placeholder="姓名" name="realname" id="realname"><br>
                    <input type="text" name="username" placeholder="用户名" class="input-reg" id="username">
                    <span id="username-msg" class="msg"></span>
                    <input type="password" class="input-reg" placeholder="密码" name="password" id="password"><br>
                    <div style="position: relative;" class="school-div">
                        <input type="text" class="input-reg" placeholder="学校" name="school" id="school">
                        <ul class="school-recommend recommend"></ul>
                    </div><br>
                    <div style="position: relative;" class="email-div">
                        <input type="email" class="input-reg" placeholder="邮箱" name="email" id="email">
                        <ul class="email-recommend recommend"></ul>
                    </div>
                    <br>
                    <div class="sel-div">
                        <select id="province" class="sel-reg" name="province">
                            <option value="-1">--请选择省--</option>
                        </select>
                        <select id="city" class="sel-reg" name="city">
                            <option value="-1">--请选择市--</option>
                        </select>
                    </div>
                    <br>
                    <div class="btn-div">
                        <input type="submit" value="注册" class="btn" onclick='rigsterBefore();'>
                        <input type="reset" value="重置" class="btn">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>

        (function () {
            // 获取下拉框省
            $.ajax({
                type: 'POST',
                url: '/AlumniRegistration/reg/getprovice',
                success: function (res) {
                    let arr = res.province;
                    let str = (function () {
                        let str = "";
                        for (let a in arr) {
                            str += `<option value="${arr[a]}">${arr[a]}</option>`
                        }
                        return str;
                    })();
                    $('#province').html($('#province').html() + str);
                }
            });
        })();


        // 验证是否所有字段都填写完毕，是的话就提交后台注册
        function rigsterBefore() {
            var realname = $('#realname').val();
            var username = $('#username').val();
            var password = $('#password').val();
            var school = $('#school').val();
            var email = $('#email').val();
            var province = $('#province').val();
            var city = $('#city').val();
            if (realname == "" || username == "" || password == "" || school == "" || email == "" || province == "" || city == "") {
                alert('请完整填写字段');
                return false;
            }
            return true;
        }


        $(function () {
            // 用户名验证-看是否被占用
            $('#username').on('input', function () {
                let username = $(this).val();
                if ($(this).val() == "") {
                    $('#username-msg').text('用户名不能为空').css({ 'color': '#f00' });
                    return;
                }
                $.ajax({
                    type: 'POST',
                    url: '/AlumniRegistration/reg/checkusername',
                    data: {
                        'username': username
                    },
                    success: function (res) {
                        if (res.username) {
                            $('#username-msg').text('用户名可以使用').css({ 'color': '#0f0' });
                        } else {
                            $('#username-msg').text('用户名已被使用').css({ 'color': '#f00' });
                        }
                    }
                })
            });


            // 学校输入提示
            $('#school').on('input', function () {
                let school = $(this).val();
                var aim = $('.school-recommend');
                if (school == "") {
                    aim.css({
                        'display': 'none'
                    })
                    return;
                }
                $.ajax({
                    type: 'POST',
                    url: '/AlumniRegistration/reg/recommendschool',
                    data: {
                        'school': school
                    },
                    success: function (res) {
                        var arr = res.school;
                        aim.html('');
                        if (res.school.length == 0) {
                            aim.css({
                                'display': 'none'
                            });
                            return;
                        }
                        aim.css({
                            'display': 'block'
                        });
                        var str = (function () {
                            var str = "";
                            for (let a in arr) {
                                str += `<li>${arr[a]}</li>`;
                            }
                            return str;
                        })();
                        aim.html(str);
                    }
                })
            });

            // 对学校选择进行绑定-事件委托
            $('.school-recommend').on('click', 'li', function () {
                var school = $(this).text();
                $('#school').val(school);
                $('.school-recommend').css({
                    'display': 'none'
                })
            });

            // 邮箱智能补全
            $('#email').on('input', function () {
                var val = $(this).val();
                if (val == "") {
                    $('.email-recommend').css({
                        'display': 'none'
                    })
                    return;
                }
                $('.email-recommend').empty();
                var str = `
                    <li>${val}@163.com</li>
                    <li>${val}@qq.com</li>
                    <li>${val}@126.com</li>
                    <li>${val}@21cn.com</li>
                `;
                $('.email-recommend').html(str).css({
                    'display': 'block'
                });
            });


            // 对邮箱进行事件委托
            $('.email-recommend').on('click', 'li', function () {
                var email = $(this).text();
                $('#email').val(email);
                $('.email-recommend').css({
                    'display': 'none'
                })
            });

            $('#province').on('change', function () {
                var province = $(this).val();
                // 获取下拉框市
                $.ajax({
                    type: 'POST',
                    url: '/AlumniRegistration/reg/getcity',
                    data: {
                        'province': province
                    },
                    success: function (res) {
                        let arr = res.city;
                        $('#city option:gt(0)').remove();
                        let str = (function () {
                            let str = "";
                            for (let a in arr) {
                                str += `<option value="${arr[a]}">${arr[a]}</option>`
                            }
                            return str;
                        })();
                        $('#city').html($('#city').html() + str);
                    }
                })
            });

        })
    </script>
</body>

</html>